<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢乐豆记录</title>
    <script src="js/jquery.js"></script>
    <!--引入分页-->
    <link rel="stylesheet" type="text/css" href="css/amazeui.css"/>


    <script>
        //页面加载时触发
        $(function(){
            //查询欢乐豆记录的接口
            queryHistoryList();
        });
        /*   //查询欢乐豆流水列表
         function queryHistoryList(){

       /*  //获取当前登录用户id
             var uid = localStorage.getItem("uid");

             $.ajax({
                 type: "GET",
                 url: "http://localhost:8080/happybean/list",
                 data: {
                     uid: uid
                 },
                 success: function(data){
                     console.log(data);

                     //data -> 记录列表
                     //for -> data -> <tr></tr> -> <tbody>
                     for(var i = 0; i < data.length; i++){
                         //从data数组中取出第i条记录
                         var item = data[i];

                         var source = "";
                         if(item.source == 0){
                             source = "充值";
                         } else if(item.source == 1){
                             source = "对局";
                         } else if(item.source == 2){
                             source = "系统赠送";
                         }

                         var html = "<tr><td>" + item.id + "</td> <td>"
                             + (item.type == 0 ? "+" : "-") + item.beanNumber + "</td> <td>"
                             + item.createTime + "</td> <td>"
                             + source + "</td></tr>";

                         $("#mytbody").append(html);
                     }
                 }
             });
         }*/
        //分页
        $(function(){
            showPage(1);
        });

        function showPage(page){
            //获取 当前登录用户id
            var uid = localStorage.getItem("uid");

            $.ajax({
                type:"GET",
                url: "http://localhost:8080/happybean/list",
                data:{
                    uid: uid
                },
                dataType:"json",
                success: function(data){
                    var newsTotalNum = data.length;
                    console.log(newsTotalNum);
                    var pageNum = Math.ceil(newsTotalNum/6); //分页的总页数
                    var content = '<table class="table_class">' +
                        '<thead>' + '<tr>' +
                        '<td>编号</td>'+
                        '<td>欢乐豆操作数</td>'+
                        '<td>操作时间</td>'+
                        '<td>操作类型</td>'+
                        '</tr>' + '</thead>';

                    for(var i=((page-1)*6); i<(page*6)&&i<newsTotalNum;i++){

                        var source = "";
                        if(data[i].source == 0){
                            source="充值";
                        }else if(data[i].source == 1){
                            source="对局";
                        }else if(data[i].source == 2){
                            source="系统赠送";
                        }

                        content += '<tbody><tr>' +
                            '<td>'+data[i].id+'</td>'+
                            '<td>'+data[i].beanNumber+'</td>' +
                            '<td>'+data[i].createTime+'</td>' +
                            '<td>'+source+'</td>' +
                            '</tr></tbody>';
                    }

                    content += '</table>' +
                        '<div>' +'共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
                        '<div class="am-fr">' +
                        '<ul class="am-pagination" id="page">';
                    //判断前面是否还有页面
                    if(page == 1){
                        content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';
                    }else{
                        content += '<li><a href="javascript:showPage('+(page-1)+')" rel="external nofollow" >«</a></li>';
                    }
                    for(var i=1;i<=pageNum;i++){
                        if(i == page){
                            content += '<li class="am-active"><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                        }else{
                            content += '<li><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';
                        }
                    }
                    //判断后面是否还有页面
                    if(page == pageNum){
                        content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';
                    }else{
                        content += '<li><a href="javascript:showPage('+(page+1)+')" rel="external nofollow" >»</a></li>';
                    }
                    content += '</ul>' + '</div>' + '</div><hr>';

                    $("#listTag").empty();
                    $("#listTag").append(content);
                }
            });
        }
    </script>
    <style>
        .body_class{
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #b2e2fa;

        }
        .table_class{
            width: 100%;
            text-align: center;
        }
        .table_class td{
            padding: 20px;
            border: 1px solid white;
        }
        .table_class thead tr {
            background-color: aqua;
        }
        .table_class tbody tr:nth-child(even){
            background-color: burlywood;
        }
        .table_class tbody tr:nth-child(odd){
            background-color: gainsboro;
        }
    </style>
</head>
<body class="body_class">
<h1>欢乐豆记录列表</h1>

<!--<table border="1" class="table_class">
    <thead>
    <tr>
        <td>编号</td>
        <td>欢乐豆操作数</td>
        <td>操作时间</td>
        <td>操作类型</td>
    </tr>
    </thead>
    <tbody id="mytbody">

    </tbody>
</table>-->
<div>
    <div id="listTag"></div>
</div>
</body>
</html>
